<!--
 * @Author: lmk
 * @Date: 2022-04-16 11:30:35
 * @LastEditTime: 2022-06-29 16:14:03
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <div class="calendar flex justify-center">
    <div class="flex" :class="{week:isWeek}">
      <div class="calendar-monthStr self-center flex-none">
        {{d(currentType.monthDate,'short')}} 
        <span v-if="isWeek">{{$t('home.week',{week:currentType.currentWeekStr})}}</span>
      </div>
      <div class="flex calendar-view-container flex-grow">
        <img src="/img/home/calendar-left.png" alt="" @click="changeCalendarBtn('prev')" class="self-center">
        <div class="calendar-view flex">
          <div v-for="(item,index) in currentMonthArr" :key="index" 
          class="flex-1 text-center calendar-item"
          @click="getCurrent(item)"
          :class="{active:item.active}">
            <p>{{item.week}}</p>
            <p class="day">{{item.day}}</p>
          </div>
        </div>
        <img src="/img/home/calendar-right.png" alt=""  @click="changeCalendarBtn('next')"  class="self-center">
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { useI18n } from 'vue-i18n';
import weekOfMonth from '@zouxin/dayjs-plugin-weekofmonth'
dayjs.extend(weekOfMonth, { offset: 1 })
export default {
  props:{
    activeArr:{
      type:Array,
      default:()=>[]
    },
    isWeek:{
      type:Boolean,
      default:false
    }
  },
  computed: {
    currentMonthArr(){
      this.activeArr.forEach(val=>{
        const findIndex = this.currentType.arr.findIndex(item=>item.day===Number(val))
        if(findIndex>-1) this.currentType.arr[findIndex].active = true
        return val;
      })
      return this.currentType.arr
    },
    currentType(){
      return this.isWeek ? this.currentWeek : this.currentMonth
    },
    isZh(){
      return this.$i18n.locale === 'zh'
    }
  },
  setup() {
    const {d} = useI18n()
    return {
      d
    };
  },
  data() {
    return {
      currentMonth:{},
      nowMonth: dayjs(),
      currentWeek:{},
      nowWeek: dayjs()
    }
  },
  created () {
    if(this.isWeek) {
      this.currentWeek = this.getWeekArr();
      this.$emit('changeMonth',this.nowMonth.format('YYYY-MM'))
    } else{
      // 获取当月数据
      this.currentMonth = this.getMonthArr();
      this.$emit('changeMonth',this.nowMonth.format('YYYY-MM'))
    }
  },
  methods: {
    // 获取当天数据
    getDayFormat(month, day, dayjsStr){
      const time = dayjsStr || `${month}-${day}`
      if(dayjsStr){
        day = dayjs(dayjsStr).date()
      }
      const week = dayjs(time).format('dd');
      const timeStr = dayjs(time).format('YYYY-MM-DD');
      return {
        day,
        time:timeStr,
        week:week.split('')[0]
      }
    },
    // 获取指定时间的月份数据
    getMonthArr(time=dayjs()){
      const getMonthDays = dayjs(time).daysInMonth();
      const arr = [];
      const month = dayjs(time).format('YYYY-MM');
      for(let i = 1; i <= getMonthDays; i++){
        arr.push(this.getDayFormat(month,i))
      }
      const currentMonth = dayjs().format('YYYY-MM')
      return {
        month:currentMonth,
        monthDate: dayjs(month).format(),
        arr
      };
    },
    // 获取指定时间的星期数据
    getWeekArr(time=dayjs().format('YYYY-MM-DD')){
      const arr = [];
      const weekNum = dayjs(time).format('d');
      const max = 7
      const startWeekTime = dayjs(time).subtract(weekNum-1,'day').format('YYYY-MM-DD'); // 当前时间的本周一
      const endWeekTime = dayjs(time).add(max-weekNum,'day').format('YYYY-MM-DD'); // 本周日
      for(let i = 0; i < max; i++){
        arr.push(this.getDayFormat(false,false,dayjs(startWeekTime).add(i,'day').format('YYYY-MM-DD')))
      }
      const currentTime = dayjs(time).startOf('month').format('YYYY-MM-DD')
      const weekZhcn = ['五','一','二','三','四','五']
      const currentWeekNum = dayjs(startWeekTime).weekOfMonth()
      return {
        month:currentTime,
        monthDate: dayjs(currentTime).format(),
        currentWeekStr: this.isZh ? weekZhcn[currentWeekNum]: currentWeekNum,
        currentWeekNum: currentWeekNum,
        arr,
        startWeekTime,
        endWeekTime,
      };
    },
    changeCalendarBtn(type){
      !this.isWeek ? this.changeCalendar(type) : this.changeWeek(type)
    },
    // 切换月份
    changeCalendar(type){
      const month = type==='next' ? dayjs(this.nowMonth).add(1, 'month') : dayjs(this.nowMonth).subtract(1, 'month');
      this.currentMonth = this.getMonthArr(month);
      this.nowMonth = month
      this.$emit('changeMonth',month.format('YYYY-MM'))
    },
    // 切换星期
    changeWeek(type){
      // 8 = 一周的天数 + 后退一天 = 上个星期的周一
      const week = type==='next' ? dayjs(this.currentWeek.endWeekTime).add(1, 'day') : dayjs(this.currentWeek.startWeekTime).subtract(8, 'day');
      this.currentWeek = this.getWeekArr(week);
      this.nowWeek = week
      if(this.currentWeek.currentWeekNum==1){
        this.$emit('changeMonth',week.format('YYYY-MM'))
      }
      // this.$emit('changeWeek',week.format('YYYY-MM'))
    },
    getCurrent(item){
      this.$router.push('/activity')
      console.log(item)
    }
  },
}
</script>

<style lang="scss">
.calendar{
  user-select: none;
  &-monthStr{
    font-size: 24px;
    font-weight: bold;
    color: $activeTxt;
    
    text-align: center;
  }
  &-view-container{
    img{
      height: 20px;
      margin: 0 5px;
      cursor: pointer;
    }
  }
  &-item{
    font-size: 20px;
    font-weight: bold;
    color: #707070;
    line-height: 1;
    padding: 0 5px;
    p{
      margin: 0;
    }
    .day{
      margin-top: 10px;
      white-space: nowrap;
      margin-bottom: 0;
    }
  }
  .active{
    color: $activeTxt;
  }
}
// .week{
//   flex-direction: column;
//   .calendar-monthStr{
//     width: 100%;
//     margin-bottom: 10px;
//   }
//   .calendar-item{
//     padding: 0 8px;
//   }
// }
@media screen and (min-width: 1400px) {
  .calendar{
    padding: 18px 0;
  }
  .calendar-monthStr{
    width: 200px;
  }
}
@media screen and (max-width: 1401px) {
  .calendar{
    padding: 7px 0;
    &-monthStr{
      font-size: 12px;
      margin-right: 30px;
    }
    &-item{
      font-size: 10px;
      .day{
        margin-top: 5px;
        white-space: nowrap;
        margin-bottom: 0;
      }
    }
    &-view-container{
      img{
        height: 10px;
        margin: 0 5px;
        cursor: pointer;
      }
    }
  }
}
</style>